<template>
  <aside class="sidebar">
    <!-- 顶部按钮组 -->
    <div class="top-actions">
      <button class="new-chat">
        <span>+ New Chat</span>
      </button>
      <button class="toggle-btn">
        <span>⋮</span>
      </button>
    </div>

    <!-- 机器人列表 -->
    <div class="bots-section">
      <h3>My Bots</h3>
      <ul class="bots-list">
        <li v-for="bot in bots" :key="bot.name">
          <img :src="bot.icon" :alt="bot.name">
          <span>{{ bot.name }}</span>
        </li>
      </ul>
    </div>

    <!-- 底部用户信息 -->
    <div class="user-info">
      <img src="avatar.jpg" alt="User Avatar">
      <span>张三</span>
      <span class="email">1362612347kl@gmail.com</span>
    </div>
  </aside>
</template>

<script setup>
const bots = [
  { name: 'ChatGPT', icon: 'chatgpt-icon.png' },
  { name: 'GPT-4o', icon: 'gpt4-icon.png' },
  { name: 'Google Gemini', icon: 'gemini-icon.png' },
  { name: 'Image Generation', icon: 'image-icon.png' },
  { name: 'Upload & Ask PDF', icon: 'pdf-icon.png' }
]
</script>

<style scoped>
.sidebar {
  width: 260px;
  background: #fff;
  border-right: 1px solid #eee;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

/* 其他样式... */
</style> 